<!--
 * @Descripttion:人员
 * @version:
 * @Author: ada.wu
 * @Date:2024-03-11 11:26:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-09 18:59:55
-->
<template>

  <div class="hub">
    <div class="linear_bg"></div>
    <div class="m radius">
      <div class="bg-white" style="position: relative;">
        <div class="t-c p-tb">
          <img src="/@/assets/report/employee.svg">
        </div>
        <van-empty v-if="listData.length==0&&!listLoading" description="暂无查询结果…" :image="getAssets('empty.svg')" />
        <van-pull-refresh v-model="listLoading" @refresh="downCallback" style="min-height: 50vh;">
          <van-list v-model:loading="listLoading" :finished="listFinished" @load="onLoadPage">
            <van-cell-group>
              <van-cell v-for="(item,index) in listData" :key="index" :title="item.examName" is-link @click="goDetail(item)">
              </van-cell>
            </van-cell-group>
            <!-- <template #finished>
              <div class="p">
                <van-divider v-if="listData.length">没有更多了</van-divider>
              </div>
            </template> -->
          </van-list>
        </van-pull-refresh>

      </div>
    </div>
  </div>

</template>
<script lang="ts">
import { Search, PullRefresh, Divider } from "vant";
//util
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { PageEnum } from "/@/enums/pageEnum";
import { getNewObj } from "/@/util";

//api
import { personReportMobile } from "/@/api/ExamApi";
export default {
  name: "Employee",
  components: {
    [Search.name]: Search,
    [Divider.name]: Divider,
    [PullRefresh.name]: PullRefresh,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let {
      evaluatedUserId = "",
      valuatorUserId = "",
      evaluatedName = "",
      startTime = "",
      endTime = "",
    } = route.query;
    console.log("route.query==", route.query);
    const state = reactive({
      isQuery: false,
      searchKey: "",
      queryParam: {
        evaluatedName, //被评价者名称，左like
        evaluatedUserId, //被评价者userId
        startTime, //开始时间
        endTime, //结束时间
        valuatorUserId, //评价者userId

        pageNumber: 1, //当前页
        pageSize: 10, //分页大小
      },
      totalElements: 0,
      listData: <any>[],
      listFinished: false,
      listLoading: false,
    });
    onMounted(() => {
      nextTick(() => {});
    });
    //加载时执行
    const onLoadPage = () => {
      queryList();
    };
    const handleReset = () => {
      downCallback();
    };

    const downCallback = () => {
      resetList();
      queryList();
    };

    const queryList = () => {
      // if (state.listLoading) return;
      // state.listLoading = true;
      let { queryParam } = getNewObj(state);
      personReportMobile({
        ...queryParam,
      })
        .then((res: any) => {
          if (res) {
            state.listData = [...state.listData, ...res.list];
            if (res.list.length < state.queryParam.pageSize) {
              state.listFinished = true;
            } else {
              state.queryParam.pageNumber++;
            }
            console.log('state.listData==',state.listData)
          } else {
            state.listData = [];
            state.listFinished = true;
          }
        })
        .catch(() => {
          state.listFinished = true;
        })
        .finally(() => {
          state.listLoading = false;
        });
    };

    const resetList = () => {
      state.isQuery = false;
      state.queryParam.pageNumber = 1;
      state.listData = [];
    };

    const goDetail = (item: any) => {
      console.log(item);
      let urlParam = {
        userName: item.userName,
        userCode: item.userCode,
      };
      router.push({
        path: PageEnum.REPORT_EMPLOYEE_DETAIL,
        query: urlParam,
      });
    };

    const onSearch = (val: any) => {
      console.log(val);
    };
    const onClickButton = (val) => {
      console.log(val);
    };

    return {
      ...toRefs(state),
      goDetail,
      downCallback,
      handleReset,
      onLoadPage,
      onSearch,
      onClickButton,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep(.van-cell) {
  align-items: center;
}

::v-deep(.van-hairline--top-bottom:after) {
  border-width: 0 0 1px 0;
  right: -42%;
  left: -42%;
}
</style>
